import {
  ComponentPropsType,
  getComponentConfByType,
} from "@/components/QuestionComponents";
import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import { changeComponentProps } from "@/store/componentsReducer";
import { FC } from "react";
import { useDispatch } from "react-redux";

const NoProp: FC = () => {
  return <div style={{ textAlign: "center" }}>未选中组件</div>;
};

const ComponentProp: FC = () => {
  const dispatch = useDispatch();
  const { selectedComponent } = useGetComponentInfo();
  if (!selectedComponent) return <NoProp />;

  const { props, type, isLocked, isHidden } = selectedComponent;
  const componentConf = getComponentConfByType(type);
  if (!componentConf) return <NoProp />;

  const { PropComponent } = componentConf;

  const handleChangeProps = (newProps: ComponentPropsType) => {
    dispatch(changeComponentProps(newProps));
  };

  return (
    <PropComponent
      {...props}
      disabled={isLocked || isHidden} // hidden 时禁用是以防万一
      onChange={handleChangeProps}
    />
  );
};

export default ComponentProp;
